<section>
  {{#heading 2}}Sass Reference{{/heading}}

  {{#if (hasContent sass.variable)}}
  <section>
    {{#heading 3 'sass-variables'}}Variables{{/heading}}

    <p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>

    <table class="docs-variable-table">
      <thead>
        <tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
      </thead>
      {{#each sass.variable}}
      <tr>
        <td class="name"><code>${{this.context.name}}</code></td>
        <td>{{formatSassTypes this.type}}</td>
        <td class="zf-docs-type-{{toLower this.type}}"><code>{{formatSassValue this.context.value}}</code></td>
        <td>{{md this.description}}</td>
      </tr>
      {{/each}}
    </table>
  </section>
  {{/if}}

  {{#if (hasContent sass.mixin)}}
  {{#if sass.variable}}<hr>{{/if}}

  <section>
    {{#heading 3 'sass-mixins'}}Mixins{{/heading}}

    <p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>

    {{#each sass.mixin}}{{#filter this}}
    <section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
      {{#heading 4}}{{this.context.name}}{{/heading}}

      {{#if this.since}}
        <p class="docs-notice-added">Added in {{this.since.0.version}}</p>
      {{/if}}

      {{#if this.deprecated}}
        <p class="docs-notice-deprecated">Deprecated in {{this.deprecated}}</p>
      {{/if}}

      <div class="docs-code">
        <pre><code>{{writeSassMixin this}}</code></pre>
      </div>

      {{md this.description}}

      {{#if this.aliased}}
        <p><strong>Aliases:</strong> {{#each this.aliased}}<code>{{this}}()</code>{{/each}}</p>
      {{/if}}

      {{writeSassLink this.link}}

      {{#if this.parameter}}
      <table class="docs-variable-table">
        <thead>
          <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
        </thead>
        {{#each this.parameter}}
        <tr>
          <td><code>${{this.name}}</code></td>
          <td>{{formatSassTypes this.type}}</td>
          <td><code>{{formatSassValue this.default}}</code></td>
          <td>{{md this.description}}</td>
        </tr>
        {{/each}}
      </table>
      {{/if}}
    </section>

    {{#unless @last}}<hr>{{/unless}}

    {{#if sass.function}}
      <hr>
    {{/if}}

    {{/filter}}{{/each}}
  </section>
  {{/if}}

  {{#if (hasContent sass.function)}}
  <hr>

  <section>
    {{#heading 3 'sass-functions'}}Functions{{/heading}}

    {{#each sass.function}}{{#filter this}}
    <section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
      {{#heading 4}}{{this.context.name}}{{/heading}}

      {{#if this.since}}
        <p class="docs-notice-added">Added in {{this.since.0.version}}</p>
      {{/if}}

      {{#if this.deprecated}}
        <p class="docs-notice-deprecated">Deprecated in {{this.deprecated.version}}</p>
      {{/if}}

      <div class="docs-code">
        <pre><code>{{writeSassFunction this}}</code></pre>
      </div>

      {{md this.description}}

      {{writeSassLink this.link}}

      {{#if this.parameter}}
      <table class="docs-variable-table">
        <thead>
          <tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
        </thead>
        {{#each this.parameter}}
        <tr>
          <td><code>${{this.name}}</code></td>
          <td>{{formatSassTypes this.type}}</td>
          <td><code>{{formatSassValue this.default}}</code></td>
          <td>{{md this.description}}</td>
        </tr>
        {{/each}}
      </table>
      {{/if}}
    </section>

    {{#unless @last}}<hr>{{/unless}}
    {{/filter}}{{/each}}
  </section>
  {{/if}}

</section>
